.nav-header {
  padding: 0;
}

.nav-buttons-container {
  padding: 2px 10px 10px;
  justify-content: flex-start;
  line-height: 1;
  font-size: 18px;
}

.nav-action-button {
  @include radius-m;

  padding: 3px 5px;
  opacity: 1;
  margin: 0 2px 0 0;
  display: flex;
  border-radius: var(--radius-m);
  background-color: var(--background-primary);
  box-shadow: 0px 1px 1px rgb(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.12);

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    background-color: var(--background-primary);
    color: var(--text-muted);
  }

  .is-mobile & {
    padding: 6px 8px;
    margin: 0 5px 0 0;

    svg {
      width: var(--svg-xxl);
      height: var(--svg-xxl);
    }
  }

  &.is-active {
    color: var(--text-muted);
    background-color: var(--background-primary);
    border-color: hsla(var(--accent-hsl), 0.7);
    box-shadow: 0px 1px 1px rgb(0, 0, 0, 0.08),
      inset 0 0 0 1px hsla(var(--accent-hsl), 0.7);

    &:hover {
      color: var(--text-muted);
    }
  }

  .theme-dark & {
    color: var(--text-normal);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1),
      inset 0px 1px 1px rgba(255, 255, 255, 0.3);
    background-color: var(--shade-20);
    border: 1px solid rgba(0, 0, 0, 0.5);

    &.is-active,
    &:hover {
      color: var(--text-normal);
      background-color: var(--shade-20);
      border-color: hsla(var(--accent-hsl), 0.7);
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1),
        inset 0px 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 0 0 1px hsla(var(--accent-hsl), 0.7);
    }
  }
}
